<!--
* @description pop触发按钮
* @author zywu
* @date 2021/03/19 14:33:00
!-->
<template>
  <div class="pop-button d-flex ai-center" :class="[isActive?'is-active':'',isOpen?'is-open':'','jc-'+align]">
    <span class="ell">{{text}}</span>
    <i v-if="showIcon" class="iconfont icon-youjiantoushixinxiao"></i>
  </div>
</template>

<script>
export default {
  props: {
    isActive: Boolean,
    isOpen: Boolean,
    text: String,
    align: {
      type: String,
      default: 'center',
    },
    showIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
}
</script>
<style lang='scss'>
@import '../styles/variables.scss';
.pop-button {
  padding: 10px 0;
  color: #999;
  font-size: 14px;
  .iconfont {
    transition: transform 0.2s;
  }
  &.is-active {
    color: $color-theme;
  }
  &.is-open {
    .iconfont {
      transform: rotate(270deg);
    }
  }
  .iconfont {
    font-size: 18px;
    transform: rotate(90deg);
  }
}
</style>